Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
The framesync npm package is a utility for managing timing and synchronization of animations, tasks, and other frame-based operations in JavaScript. It provides a simple API to schedule tasks to run before the next repaint, ensuring smooth visual updates.
Scheduling tasks on the next frame
This feature allows you to schedule a function to be called at the start of the next frame. This is useful for ensuring updates are synchronized with the browser's repaint, reducing jank and improving performance of animations or UI updates.
import { onFrameStart } from 'framesync';
function update() {
console.log('Updating on the next frame');
}
onFrameStart(update);
Canceling scheduled tasks
This feature provides the ability to cancel a previously scheduled task. This is useful for avoiding unnecessary updates, especially in scenarios where component states or data might change before the scheduled execution.
import { onFrameStart, cancelSync } from 'framesync';
const update = () => console.log('This will not run if canceled before the next frame');
const process = onFrameStart(update);
cancelSync.update(process);
raf-schd provides a similar functionality to framesync by scheduling tasks with requestAnimationFrame. It differs in its API design and focus on throttling, making it more suitable for rate-limiting updates in high-frequency scenarios.
A tiny frame scheduler for performantly batching reads, updates and renders.
Segregating actions that read and write to the DOM will avoid layout thrashing.
It's also a way of ensuring order of execution across a frame. For instance, Popmotion batches updates on the update
step, and Stylefire batches renders on the render
step, allowing independent animation of transform
properties.
npm install framesync
Framesync splits a frame into discrete read
, update
, render
and postRender
steps.
Functions can be scheduled to different parts of the render loop with sync
.
import sync from 'framesync';
It provides four functions, one for scheduling a function to run on each part of the frame:
sync.update(() => {});
Each function is provided data about the current frame:
sync.update(({ delta, timestamp }) => {});
delta
: Time since last frame (in milliseconds)timestamp
: Timestamp of the current frame.This object is recycled across frames, so values should be destructured if intended to be used asynchronously.
We can run a function as an ongoing process by passing true
as the second parameter:
let count = 0;
sync.update(() => count++, true);
This will keep the process running until it's actively cancelled.
The third parameter, immediate
, can be used to sync a function on the current frame step.
By default, Framesync will schedule functions to run the next time that frame step is fired:
sync.update(({ timestamp }) => {
// The following function will run on the subsequent frame:
sync.update((frame) => frame.timestamp !== timestamp);
});
By setting immediate
to true
, we can add this at the end of the current step:
sync.update(({ timestamp }) => {
// The following function will run on the **current** frame:
sync.update(
(frame) => frame.timestamp === timestamp,
false,
true
);
});
Synced processes can be cancelled with the cancelSync
function:
import sync, { cancelSync } from 'framesync';
let count = 0;
const process = sync.render(() => {
count++;
if (count >= 10) cancelSync.render(process);
}, true);
FAQs
A frame-synced render loop for JavaScript
The npm package framesync receives a total of 1,274,666 weekly downloads. As such, framesync popularity was classified as popular.
We found that framesync demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.